<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/xjf.css">
    <link rel="stylesheet" href="./css/导航栏.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/1.js"></script>
    <script src="./js/导航栏.js"></script>
</head>
<body>
<header>
    <!--    导航条-->

    <nav class="navbar navbar-default" id="nav">
        <div class="container-fluid">
            <!-- logo -->
            <div class="navbar-header">
                <!--            响应式-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">logo</a>
            </div>
            <!-- 系统名字 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">智慧物业<span>管理系统</span></a></li>
                </ul>
                <!--    选择社区-->
                <form class="navbar-form navbar-left">
                    <select>
                        <option>智慧社区Ⅰ</option>
                        <option>智慧社区Ⅱ</option>
                        <option>智慧社区Ⅲ</option>
                        <option>智慧社区Ⅳ</option>
                    </select>
                </form>
                <!--            导航-->
                <ul class="nav navbar-nav">
                    <li><a href="#">物业管理</a></li>
                    <li><a href="#">物联设备</a></li>
                    <li><a href="#">APP管理</a></li>
                </ul>
                <!--用户-->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
                    <li><a href="#"> 欢迎</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" ><span class="glyphicon glyphicon-user"></span>  admin <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">密码更改</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="YaoKeTongLogin.html">退出登录</a></li>
                        </ul>
                    </li>
                </ul>


            </div><!-- /.navbar-collapse -->



        </div><!-- /.container-fluid -->
    </nav>

</header>
<main>

    <!--左侧导航栏-->
    <div class="row " id="zuocedaohuang">
        <ul>
            <li>
                <div><i class="glyphicon glyphicon-home"></i> <i><a href="">首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></i><span></span></div>
            </li>
            <li><div><i class="glyphicon glyphicon-user"></i><i>人员管理</i><span class="glyphicon glyphicon-triangle-bottom glyphicon1"></span></div>
                <ul>
                    <li><a href="#">住户实名管理管理</a></li>
                </ul>
            </li>
            <li><div><i class="glyphicon glyphicon-tower"></i><i>房屋管理</i><span class="glyphicon glyphicon-triangle-bottom glyphicon1"></span></div>
                <ul>
                    <li><a href="#">房源管理</a></li>
                    <li><a href="#">房屋档案</a></li>
                </ul>

            </li>
            <li><div><i class="glyphicon glyphicon-rub"></i><i>停车管理</i><span class="glyphicon glyphicon-triangle-bottom glyphicon1"></span></div>
                <ul>
                    <li><a href="#">车位管理</a></li>
                    <li><a href="#">车辆管理</a></li>
                </ul>
            </li>
            <li><div><i class="glyphicon glyphicon-yen"></i><i>物业缴费</i><span class="glyphicon glyphicon-triangle-bottom glyphicon1"></span></div>
                <ul>
                    <li><a href="#">缴费记录</a></li>
                    <li><a href="#">缴费订单</a></li>
                    <li><a href="#">收款账号</a></li>
                </ul>
            </li>
            <li><div><i class="glyphicon glyphicon-heart-empty"></i><i>物业服务</i><span class="glyphicon glyphicon-triangle-bottom glyphicon1"></span></div>
                <ul>
                    <li><a href="#">工单配置</a></li>
                    <li><a href="#">报修管理</a></li>
                </ul>

            </li>
            <li><div><i class="glyphicon glyphicon-cog"></i><i>通用配置</i><span class="glyphicon glyphicon-triangle-bottom glyphicon1"></span></div>
                <ul>
                    <li><a href="#">信息服务</a></li>
                    <li><a href="#">账单配置</a></li>
                    <li><a href="#">物业信息</a></li>
                </ul>

            </li>
            <li><div><i class="glyphicon glyphicon-user"></i><i>个人中心</i><span class="glyphicon glyphicon-triangle-bottom glyphicon1"></span></div>
                <ul>
                    <li><a href="#">修改密码</a></li>
                    <li><a href="#">初始化</a></li>
                </ul>
            </li>
        </ul>
    </div>

    </main>
    <div id="myForm">
        <section class="section1">
            <p>工单管理＞工单配置</p>
        </section>
        <div>
            <div class="leftSide">
                <div class="leftSide-top">
                    <span>工单大类</span>
                    <i class='glyphicon glyphicon-menu-up' id="xiala"></i>
                </div>
                <ul id="menu">
                    <li>
                        <span>房屋维修</span>
                        <i class="glyphicon glyphicon-wrench"></i>
                    </li>
                    <li>
                        <span>公区维修</span>
                        <i class="glyphicon glyphicon-wrench"></i>
                    </li>
                    <li>
                        <span>车位维修</span>
                        <i class="glyphicon glyphicon-wrench"></i>
                    </li>
                    <li>
                        <span>电梯维修</span>
                        <i class="glyphicon glyphicon-wrench"></i>
                    </li>
                    <li>
                        <span>事件报警</span>
                        <i class="glyphicon glyphicon-earphone"></i>
                    </li>
                    <li>
                        <span>环境保洁</span>
                        <i class="glyphicon glyphicon-leaf"></i>
                    </li>
                    <li>
                        <span>增值服务</span>
                        <i class="glyphicon glyphicon-piggy-bank"></i>
                    </li>
                    <li>
                        <span>户内报修</span>
                        <i class="glyphicon glyphicon-wrench"></i>
                        <i class="glyphicon glyphicon-cog"></i>
                    </li>
                </ul>
            </div>
            <div class="rightSide">
                <table>
                    <thead>
                        <tr>
                            <th>二级工单分类</th>
                            <th>关联区域</th>
                            <th>内容描述</th>
                            <th>可派单责任人</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="userTable">
                        <div class="searchBorder oneFather">
                            <div class="search"><input type="text" placeholder="查询..."></input>
                              <i class="glyphicon glyphicon-search one"></i></div>
                        </div>
                        <div class="searchBorder twoFather">
                            <div class="search"><input type="text" placeholder="查询..."></input>
                              <i class="glyphicon glyphicon-search two"></i></div>
                        </div>
                        <div class="searchBorder threeFather">
                            <div class="search"><input type="text" placeholder="查询..."></input>
                              <i class="glyphicon glyphicon-search three"></i></div>
                        </div>
                        <div class="searchBorder fourFather">
                            <div class="search"><input type="text" placeholder="查询..."></input>
                              <i class="glyphicon glyphicon-search four"></i></div>
                        </div>
                        <div class="searchBorder fiveFather">
                            <div class="search"><input type="text" placeholder="查询..."></input>
                              <i class="glyphicon glyphicon-search five"></i></div>
                        </div>
                        <div class="searchBorder sixFather">
                            <div class="search"><input type="text" placeholder="查询..."></input>
                              <i class="glyphicon glyphicon-search six"></i></div>
                        </div>
                        <div class="searchBorder sevenFather">
                            <div class="search"><input type="text" placeholder="查询..."></input>
                              <i class="glyphicon glyphicon-search seven"></i></div>
                        </div>
                        <div class="searchBorder eightFather">
                            <div class="search"><input type="text" placeholder="查询..."></input>
                              <i class="glyphicon glyphicon-search eight"></i></div>
                        </div>
                    </tbody>
                </table>
            </div>
            <div class="modal fade confirm">
                <div>
                    <span>确认删除吗</span>
                </div>
                <div>
                    </button><button class="btn btn-default yes">确认</button>
                    </button><button class="btn btn-default no">取消</button>
                </div>

            </div>
            <div class="modal fade confirm2">
                <div>
                    <span>确认删除吗</span>
                </div>
                <div>
                    </button><button class="btn btn-default yes">确认</button>
                    </button><button class="btn btn-default no">取消</button>
                </div>

            </div>
            <div class="modal fade confirm3">
                <div>
                    <span>确认删除吗</span>
                </div>
                <div>
                    </button><button class="btn btn-default yes">确认</button>
                    </button><button class="btn btn-default no">取消</button>
                </div>

            </div>
            <div class="modal fade confirm4">
                <div>
                    <span>确认删除吗</span>
                </div>
                <div>
                    </button><button class="btn btn-default yes">确认</button>
                    </button><button class="btn btn-default no">取消</button>
                </div>

            </div>
            <div class="modal fade confirm5">
                <div>
                    <span>确认删除吗</span>
                </div>
                <div>
                    </button><button class="btn btn-default yes">确认</button>
                    </button><button class="btn btn-default no">取消</button>
                </div>

            </div> 
            <div class="modal fade confirm6">
                <div>
                    <span>确认删除吗</span>
                </div>
                <div>
                    </button><button class="btn btn-default yes">确认</button>
                    </button><button class="btn btn-default no">取消</button>
                </div>

            </div> 
            <div class="modal fade confirm7">
                <div>
                    <span>确认删除吗</span>
                </div>
                <div>
                    </button><button class="btn btn-default yes">确认</button>
                    </button><button class="btn btn-default no">取消</button>
                </div>

            </div> 
            <div class="modal fade confirm8">
                <div>
                    <span>确认删除吗</span>
                </div>
                <div>
                    </button><button class="btn btn-default yes">确认</button>
                    </button><button class="btn btn-default no">取消</button>
                </div>

            </div>



            <div class="modal fade myAdd">
                <div>
                    <p>二级工单分类:<input type="text" class="form-control" id="txtFir" /></p>
                    <p>关联区域：<input type="text" class="form-control" id="txtSec" /></p>
                    <p>内容描述：<input type="text" class="form-control" id="txtThi" /></p>
                    <p>可派单负责人：<input type="text" class="form-control" id="txtFou" /></p>
                </div>
                <div>
                    </button><button class="btn btn-default addYes">添加</button>
                    </button><button class="btn btn-default addNo">取消</button>
                </div>
            </div>
            <div class="modal fade myAdd2">
                <div>
                    <p>二级工单分类:<input type="text" class="form-control" id="txtFir2" /></p>
                    <p>关联区域：<input type="text" class="form-control" id="txtSec2" /></p>
                    <p>内容描述：<input type="text" class="form-control" id="txtThi2" /></p>
                    <p>可派单负责人：<input type="text" class="form-control" id="txtFou2" /></p>
                </div>
                <div>
                    </button><button class="btn btn-default addYes2">添加</button>
                    </button><button class="btn btn-default addNo2">取消</button>
                </div>
            </div>
            <div class="modal fade myAdd3">
                <div>
                    <p>二级工单分类:<input type="text" class="form-control" id="txtFir3" /></p>
                    <p>关联区域：<input type="text" class="form-control" id="txtSec3" /></p>
                    <p>内容描述：<input type="text" class="form-control" id="txtThi3" /></p>
                    <p>可派单负责人：<input type="text" class="form-control" id="txtFou3" /></p>
                </div>
                <div>
                    </button><button class="btn btn-default addYes3">添加</button>
                    </button><button class="btn btn-default addNo3">取消</button>
                </div>
            </div>
            <div class="modal fade myAdd4">
                <div>
                    <p>二级工单分类:<input type="text" class="form-control" id="txtFir4" /></p>
                    <p>关联区域：<input type="text" class="form-control" id="txtSec4" /></p>
                    <p>内容描述：<input type="text" class="form-control" id="txtThi4" /></p>
                    <p>可派单负责人：<input type="text" class="form-control" id="txtFou4" /></p>
                </div>
                <div>
                    </button><button class="btn btn-default addYes4">添加</button>
                    </button><button class="btn btn-default addNo4">取消</button>
                </div>
            </div>
            <div class="modal fade myAdd5">
                <div>
                    <p>二级工单分类:<input type="text" class="form-control" id="txtFir5" /></p>
                    <p>关联区域：<input type="text" class="form-control" id="txtSec5" /></p>
                    <p>内容描述：<input type="text" class="form-control" id="txtThi5" /></p>
                    <p>可派单负责人：<input type="text" class="form-control" id="txtFou5" /></p>
                </div>
                <div>
                    </button><button class="btn btn-default addYes5">添加</button>
                    </button><button class="btn btn-default addNo5">取消</button>
                </div>
            </div>
            <div class="modal fade myAdd6">
                <div>
                    <p>二级工单分类:<input type="text" class="form-control" id="txtFir6" /></p>
                    <p>关联区域：<input type="text" class="form-control" id="txtSec6" /></p>
                    <p>内容描述：<input type="text" class="form-control" id="txtThi6" /></p>
                    <p>可派单负责人：<input type="text" class="form-control" id="txtFou6" /></p>
                </div>
                <div>
                    </button><button class="btn btn-default addYes6">添加</button>
                    </button><button class="btn btn-default addNo6">取消</button>
                </div>
            </div>
            <div class="modal fade myAdd7">
                <div>
                    <p>二级工单分类:<input type="text" class="form-control" id="txtFir7" /></p>
                    <p>关联区域：<input type="text" class="form-control" id="txtSec7" /></p>
                    <p>内容描述：<input type="text" class="form-control" id="txtThi7" /></p>
                    <p>可派单负责人：<input type="text" class="form-control" id="txtFou7" /></p>
                </div>
                <div>
                    </button><button class="btn btn-default addYes7">添加</button>
                    </button><button class="btn btn-default addNo7">取消</button>
                </div>
            </div>
            <div class="modal fade myAdd8">
                <div>
                    <p>二级工单分类:<input type="text" class="form-control" id="txtFir8" /></p>
                    <p>关联区域：<input type="text" class="form-control" id="txtSec8" /></p>
                    <p>内容描述：<input type="text" class="form-control" id="txtThi8" /></p>
                    <p>可派单负责人：<input type="text" class="form-control" id="txtFou8" /></p>
                </div>
                <div>
                    </button><button class="btn btn-default addYes8">添加</button>
                    </button><button class="btn btn-default addNo8">取消</button>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        $(function () {
            $('#xiala').click(function () {
                console.log($('#menu').css('height'));
                if ($('#menu').css('height') == 0 + 'px') {
                    $('#menu').css('height', '66vh')
                    $('#xiala').css('transform', 'rotate(0deg)')
                } else {
                    $('#menu').css('height', '0');
                    $('#xiala').css('transform', 'rotate(180deg)')
                }

            })

        })
//         var zuocedaohuang = document.querySelectorAll("#zuocedaohuang>ul>li>div");
//      for(var i = 0 ;i<zuocedaohuang.length;i++){
//          //物联设备
//          $("#bs-example-navbar-collapse-1 ul:nth-child(3) li:nth-child(2) a").click(function () {
//              $("body").load("WuJiaHanWuLianSheBei.html");
//          })
// //主页
//          $("#zuocedaohuang>ul>li:nth-child(1)").click(function () {
//              $("body").load("index.html");
//          })
// //人员管理
//          $("#zuocedaohuang>ul>li:nth-child(2)>ul>li").click(function () {
//              $("body").load("WuJiaHanRenYuanGuanLi.html");
//          })
// //初始化
//          $("#zuocedaohuang>ul>li:nth-child(8)>ul>li:last-child").click(function () {
//              $("body").load("chushihua.html");
//          })
// //主页
//          $("#bs-example-navbar-collapse-1 ul:nth-child(3) li:nth-child(1) a").click(function () {
//              $("body").load("index.html");
//          })
//
// //物业管理
//          $("#zuocedaohuang>ul>li:nth-child(5)>ul>li:first-child").click(function () {
//              $("body").load("HeLuYiJiaoFeiJiLu.html");
//          })
// //订单管理
//          $("#zuocedaohuang>ul>li:nth-child(5)>ul>li:nth-child(2)").click(function () {
//              $("body").load("HeLuYiDaiJiaoDingDan.html");
//          })
// //收款账号
//          $("#zuocedaohuang>ul>li:nth-child(5)>ul>li:nth-child(3)").click(function () {
//              $("body").load("HeLuYiShouKuanZhangHao.html");
//          })
//
// //房源管理
//          $("#zuocedaohuang>ul>li:nth-child(3)>ul>li:first-child").click(function () {
//              $("body").load("renchengdongfangyuanhuanli.html");
//          })
// //房屋档案
//          $("#zuocedaohuang>ul>li:nth-child(3)>ul>li:nth-child(2)").click(function () {
//              $("body").load("renchengdongfangwudangan.html");
//          })
//
// //车位管理
//          $("#zuocedaohuang>ul>li:nth-child(4)>ul>li:first-child").click(function () {
//              $("body").load("cx-chewguanli.html");
//          })
// //车辆管理
//          $("#zuocedaohuang>ul>li:nth-child(4)>ul>li:nth-child(2)").click(function () {
//              $("body").load("cx-chelguanli.html");
//          })
//
// //工单配置
//          $("#zuocedaohuang>ul>li:nth-child(6)>ul>li:first-child").click(function () {
//              $("body").load("第一个页面.html");
//          })
// //报修管理
//          $("#zuocedaohuang>ul>li:nth-child(6)>ul>li:nth-child(2)").click(function () {
//              $("body").load("第二个页面.html");
//          })
// //物业信息
//          $("#zuocedaohuang>ul>li:nth-child(7)>ul>li:nth-child(3)").click(function () {
//              $("body").load("YaoKeTongWuYeXingXi.html");
//          })
// //信息服务
//          $("#zuocedaohuang>ul>li:nth-child(7)>ul>li:first-child").click(function () {
//              $("body").load("LiuXueQiXinXiFuWu.html");
//          })
// //账单配置
//          $("#zuocedaohuang>ul>li:nth-child(7)>ul>li:nth-child(2)").click(function () {
//              $("body").load("LiuXueQiZhangDanPeiZhi.html");
//          })
//
//          $(".dropdown-toggle").click(function () {
//              if (navpanding==1){
//                  $(".dropdown-menu").css("display","block");
//                  navpanding=2;
//              }else {
//                  $(".dropdown-menu").css("display","none");
//                  navpanding=1;
//              }
//          })
//     zuocedaohuang[i].onclick=function () {
//         var liClick = this.parentNode;
//         var haizi=liClick.querySelectorAll("ul>li");
//         var liHeight = liClick.style.height;
//         for(var n = 1 ;n<zuocedaohuang.length;n++){
//             var fa=[];
//             fa[n]= zuocedaohuang[n].parentNode;
//             fa[n].style.height="50px";
//             fa[n].style.transition="all 0.2s";
//             zuocedaohuang[n].style.color="black";
//             zuocedaohuang[n].querySelector("span").style.transform="rotatez(0deg)";
//         }
//         if(liHeight=="50px"){
//             if(haizi&&haizi.length>0){
//                 this.style.color="black";
//                 liClick.style.height=50+haizi.length*50+"px";
//                 this.querySelector("span").style.transform="rotatez(180deg)";
//                 liClick.style.transition="all 0.2s";
//             }
//         }else {
//             this.style.color="black";
//             liClick.style.height="50px";
//             this.querySelector("span").style.transform="rotatez(0deg)";
//             liClick.style.transition="all 0.2s";
//             this.querySelector("span").style.transform="rotatez(0deg)";
//         }
//     }
// }
//     $(window).scroll(function () {
//     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//     var i=scrollTop;
//     if (scrollTop>500){
//         $("#zuocedaohuang>ul").css("margin-top",scrollTop+"px");
//     }
//     if (scrollTop<500){
//         $("#zuocedaohuang>ul").css("margin-top","0");
//     }
// })

    </script>
</body>

</html>